<template>
  <div>
    <van-sticky>
      <van-nav-bar
        class="nav"
        title="城市列表"
        nav-bar-title-text-color="#ffffff"
        left-arrow
        @click-left="onClickLeft"
      />
    </van-sticky>
    <van-index-bar :index-list="indexList">
      

      <div v-for="(item, index) in Alist" :key="index" :index="item">
        <van-index-anchor :index="item"></van-index-anchor>
        <van-cell
          v-for="(item, index) in filterC(item.toLowerCase())"
          :key="index"
          :title="item.label"
          @click="cityFn"
        ></van-cell>
      </div>
    </van-index-bar>
  </div>
</template>

<script>
import request from "@/utils/request";
export default {
  props: {},
  data() {
    return {
      indexList: [
        "#",
        "热",
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "G",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z",
      ],
      Alist: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "G",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z",
      ],
      cizyList: [],
      cizyHot: [],
    };
  },
  created() {

  },
  mounted() {
    this.getcziyApi();
  },
  components: {},
  methods: {
    async getcziyApi() {
      const res = await request({
        url: "/area/city",
        params: {
          level: 1,
        }, 
      });
      this.cizyList = res.data.body;
      console.log(res);
    },
    filterC(zm) {
      const newList = JSON.parse(JSON.stringify(this.cizyList)).filter(
        (item) => item.short.slice(0, 1) === zm
      );

      return newList.length === 0 ? [{ label: "暂无城市" }] : newList;
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    cityFn() {
      this.$toast("暂无数据");
    },
  },
  computed: {},
  watch: {},
};
</script>

<style scoped lang="less">
.nav {
  background-color: #21b97a;
}

/deep/.van-index-bar__index {
  padding: 0;
  margin: 3px 0;
  font-size: 12px;
  transform: translateX(-10px);
  &:hover {
    width: 10px;
    color: #fff;
    background-color: #21b97a;
    border-radius: 80%;
  }
}

.leftList {
  display: fixed;
  left: 20px;
  right: 10px;
  display: flex;
  flex-direction: column;
  width: 20px;
  height: 200px;
  background-color: pink;
}
</style>
